<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./three.js"></script>
</head>

<body onload="init()">
    <canvas id="mainCanvas" width="400px" height="300px"></canvas>
</body>

<script>
    function init(params) {
        // renderer
        let renderer = new THREE.WebGLRenderer({
            canvas: document.getElementById("mainCanvas")
        });
        renderer.setClearColor(0xf0eda0);

        // scene
        let scene = new THREE.Scene();

        // scene
        // let camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000);
        let camera = new THREE.OrthographicCamera(-2, 2, 1.5, -1.5, 1, 10);
        camera.position.set(0, 0, 5);
        // camera.lookAt(new THREE.Vector3(0, 0, 0));

        // add camera to scene
        scene.add(camera);

        // a cube in the scene
        let cube = new THREE.Mesh(new THREE.CubeGeometry(2, 1, 3),
            new THREE.MeshBasicMaterial({
                color: 0xff0000
            })
        );

        scene.add(cube);
        renderer.render(scene, camera);
    }
</script>

</html>